<template>
  <div>
    <div style="display: flex;justify-content: space-between;">
      <div>
        <el-input style="width: 300px;margin-right: 8px" v-model="empName" @keydown.enter.native="searchEmp"
                  placeholder="请输入关键字进行搜索" prefix-icon="el-icon-search"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchEmp">搜索</el-button>
        <el-button type="primary" @click="searchIcon = !searchIcon">
          <i :class="searchIcon?'fa fa-angle-double-up':'fa fa-angle-double-down'" aria-hidden="true"/>
          高级搜索
        </el-button>
      </div>
      <div>
        <el-upload
            style="display: inline-flex;margin-right: 10px"
            :headers="fileHeader"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :disabled="uploadDisabled"
            :on-success="fileSuccess"
            :on-error="fileError"
            action="/employee/basic/import"
        >
          <el-button :icon="uploadIcon" type="success" :disabled="uploadDisabled">{{ uploadText }}</el-button>
        </el-upload>
        <el-button icon="el-icon-download" type="success" @click="exportFile">导出数据</el-button>
        <el-button icon="el-icon-plus" type="primary">添加</el-button>
      </div>
    </div>

    <transition name="slide-fade">
      <div class="searchBorder" v-show="searchIcon">
        <el-row>
          <el-col :span="6">
            政治面貌：
            <el-select size="mini" style="width: 130px" placeholder="政治面貌" v-model="search.politicsId">
              <el-option
                  v-for="item in politicsstatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4" :offset="4">
            <el-button type="primary" size="mini" @click="initEmployee('advance')">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </transition>
    <div style="margin-top: 10px;margin-bottom: 10px">
      <div>
        <el-table
            :load="loading"
            :data="employees"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              align="center"
              width="80">
          </el-table-column>
          <el-table-column
              prop="birthday"
              label="出生日期"
              align="center"
              width="100">
          </el-table-column>
          <el-table-column
              prop="nation.name"
              label="民族"
              align="center"
              width="70">
          </el-table-column>
          <el-table-column
              prop="school"
              label="毕业院校"
              align="center"
              width="150">
          </el-table-column>
          <el-table-column
              prop="address"
              align="center"
              label="地址">
          </el-table-column>
          <el-table-column
              prop="contractTerm"
              align="center"
              width="100"
              label="合同期限">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.contractTerm }}天</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="300">
            <template slot-scope="scope">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {
      employees: [],
      currentPage: 1,
      pageNum: 10,
      total: 0,
      loading: false,
      empName: '',
      // 文件上传相关
      uploadIcon: 'el-icon-upload2',
      uploadText: '导入数据',
      uploadDisabled: false,
      fileHeader: {
        Authorization: window.sessionStorage.getItem("token")
      },
      politicsstatus: [],
      search: {
        politicsId: '',
      },
      searchIcon:false
    }
  },
  mounted() {
    this.initEmployee();
    this.initPolitics();
  },
  methods: {
    // 高级搜索
    initPolitics() {
      this.getRequest("/employee/basic/politics").then(res => {
        if (res) {
          this.politicsstatus = res;
        }
      })
    },


    // 文件上传
    beforeUpload() {
      this.uploadIcon = 'el-icon-loading';
      this.uploadText = '正在上传';
      this.uploadDisabled = true;
    },

    fileSuccess() {
      this.uploadIcon = 'el-icon-upload2';
      this.uploadText = '导入数据';
      this.uploadDisabled = false;
      this.initEmployee();
    },

    fileError() {
      this.uploadIcon = 'el-icon-upload2';
      this.uploadText = '导入数据';
      this.uploadDisabled = false;
    },


    // 文件下载
    exportFile() {
      this.downloadRequest('/employee/basic/export');
    },

    searchEmp() {
      this.initEmployee();
    },

    handleSizeChange(val) {
      this.pageNum = val;
      this.initEmployee();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.initEmployee();
    },

    initEmployee(type) {
      this.loading = true
      let url = "/employee/basic/?currentPage=" + this.currentPage + "&pageNum=" + this.pageNum;
      if (type && type == 'advance') {
        if (this.search.politicsId) {
          url += '&politicId=' + this.search.politicsId
        }
      } else {
        url += "&name=" + this.empName
      }
      this.getRequest(url).then(res => {
        if (res) {
          this.loading = false;
          this.employees = res.data;
          this.total = res.total;
        }
      })
    },
  }
}
</script>

<style scoped>
.searchBorder {
  border: 1px solid #409eff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin: 10px 0;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(10px);
  opacity: 0;
}
</style>